<ui:composition xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	template="template/template.xhtml">
	<ui:define name="title">
		<h:outputText value="#{msgs.scriptsVisualization}"/>
	</ui:define>
	<ui:define name="bodyInclude">
		<ui:include src="include/menu.xhtml" />
			<p:layout fullPage="false" styleClass="layout">
				<p:layoutUnit closable="false" collapsed="false" collapsible="true" header="#{msgs.scriptsVisualization}" position="left" resizable="false" styleClass="layoutUnit" width="400">
					<h:form id="scriptsTreeForm">
						<p:tree expanded="true" id="scriptsTree" nodeSelectListener="#{scriptsVisualisationController.onNodeSelect}" selection="#{scriptsVisualisationController.selectedNode}" selectionMode="single" update="visualizationUnit" value="#{scriptsVisualisationController.root}" var="node">
							<p:treeNode type="#{scriptsVisualisationController.nodeTypeItem}">
								<h:outputText escape="false" styleClass="treeIcon treeIconScriptItem" value="#{node.order} - #{node.label}" />
							</p:treeNode>
							<p:treeNode type="#{scriptsVisualisationController.nodeTypeScript}">
								<h:outputText escape="false" styleClass="treeIcon treeIconScript" value="#{node.label}" />
							</p:treeNode>
						</p:tree>
					</h:form>
				</p:layoutUnit>
				<p:layoutUnit closable="false" collapsible="false" header="#{msgs.script}: #{scriptsVisualisationController.currentScript.scriptId} - #{scriptsVisualisationController.currentScript.label}" id="visualizationUnit" position="center" resizable="false" scrollable="true" styleClass="layoutUnit">
					<h:form id="scriptDetailsForm">
						<p:outputPanel layout="block" styleClass="container center">
							<!-- No selected node -->
							<h:outputText rendered="#{null == scriptsVisualisationController.selectedNode}" value="#{msgs.pleaseSelectANodeInTheHierarchy}"/>
							
							<!-- Script item selected -->
							<p:dataTable currentPageReportTemplate="{currentPage} #{msgs.of} {totalPages}" emptyMessage="#{msgs.emptyDataTableMessage}" id="scriptsTable" paginator="true" paginatorAlwaysVisible="false" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport}{PageLinks}{NextPageLink} {LastPageLink}" rendered="#{null != scriptsVisualisationController.selectedNode and null != scriptsVisualisationController.selectedItemScripts}" rows="10" rowsPerPageTemplate="5,10,20,50" value="#{scriptsVisualisationController.selectedItemScripts}" var="script">
								<p:column headerText="#{msgs.childrenScripts}" styleClass="center">
									<h:outputText escape="false" value="#{script.label}" />
								</p:column>
							</p:dataTable>
							
							<!-- Script selected -->
							<p:dataTable currentPageReportTemplate="{currentPage} #{msgs.of} {totalPages}" emptyMessage="#{msgs.emptyDataTableMessage}" id="scriptsItemsTable" paginator="true" paginatorAlwaysVisible="false" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport}{PageLinks}{NextPageLink} {LastPageLink}" rendered="#{null != scriptsVisualisationController.selectedNode and null != scriptsVisualisationController.selectedScriptItems}" rows="10" rowsPerPageTemplate="5,10,20,50" value="#{scriptsVisualisationController.selectedScriptItems}" var="item">
								<p:column headerText="#{msgs.childrenScriptsItems}" styleClass="center">
									<h:outputText escape="false" value="#{item.label}" />
								</p:column>
							</p:dataTable>
							<p:outputPanel layout="block" styleClass="buttonContainer center">
								<p:commandButton action="#{scriptsVisualisationController.onScriptsVisualisation}" image="ui-icon ui-icon-arrowthick-1-w" process="@this" value="#{msgs.back}"/>
							</p:outputPanel>
						</p:outputPanel>
					</h:form>
				</p:layoutUnit>
			</p:layout>
	</ui:define>
</ui:composition>